<template>

    <div>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="home"><span @click="clearPath">首页</span></el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="primary" round @click="dialogVisible = true">添加用户</el-button>
            <el-table
                :data="rolesList"
                style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <!--第一级-->
                            <el-row class="db-row-1" v-for="item in scope.row.children" :key="item.id">
                                <el-col :span="5">
                                    <el-tag @close="removeRightById(scope.row,item.id)" closable disable-transitions>
                                        {{item.authName}}
                                    </el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <el-col :span="19">
                                    <!--第二级-->
                                    <el-row class="db-row-2" v-for="item2 in item.children" :key="item2.id">
                                        <el-col :span="6">
                                            <el-tag @close="removeRightById(scope.row,item2.id)" closable
                                                    :disable-transitions="true" type="success">{{item2.authName}}
                                            </el-tag>
                                            <i class="el-icon-caret-right"></i>
                                        </el-col>
                                        <!--第三级-->
                                        <el-col :span="18">
                                            <div class="db-row-3" v-for="item3 in item2.children" :key="item3.id">
                                                <el-tag @close="removeRightById(scope.row,item3.id)" closable
                                                        disable-transitions
                                                        type="warning">
                                                    {{item3.authName}}
                                                </el-tag>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    label="#"
                    type="index"
                    width="">
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="角色名称"
                    width="">
                </el-table-column>
                <el-table-column
                    prop="roleDesc"
                    label="角色描述"
                    width="">
                </el-table-column>
                <el-table-column
                    prop="level"
                    label="操作">
                    <template slot-scope="scope">
                        <!--修改-->
                        <el-tooltip :enterable="false" class="item" effect="dark" content="编辑"
                                    placement="top-start">

                            <el-button @click="" size="mini" type="primary"
                                       icon="el-icon-edit"
                                       circle>
                            </el-button>
                        </el-tooltip>
                        <!--分配用户-->
                        <el-tooltip :enterable="false" class="item" effect="dark" content="分配用户"
                                    placement="top-start">
                            <el-button @click="editRoleRights(scope.row)" size="mini" type="success"
                                       icon="el-icon-setting"
                                       circle></el-button>
                        </el-tooltip>
                        <!--删除-->
                        <el-tooltip :enterable="false" class="item" effect="dark" content="删除"
                                    placement="top-start">
                            <el-button @click="" size="mini" type="danger"
                                       icon="el-icon-delete" circle></el-button>
                        </el-tooltip>
                        <el-dialog
                            title="分配权限"
                            :visible.sync="editRoleRightsDialog"
                            width="50%"
                            @close="clearTreeKey">
                            <el-tree
                                :data="rightList"
                                :props="treeProps"
                                @node-click=""
                                show-checkbox
                                node-key="id"
                                default-expand-all
                                :default-checked-keys="treeKey"
                                ref="TreeRef"></el-tree>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="editRoleRightsDialog = false">取 消</el-button>
                            <el-button type="primary" @click="sendTreeKey">确 定</el-button>
                            </span>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>

        </el-card>
    </div>


</template>

<script>
    export default {
        name: "Roles",
        data() {
            return {
                rolesList: [],
                editRoleRightsDialog: false,
                rightList: [],
                treeProps: {
                    children: 'children',
                    label: 'authName'
                },
                treeKey: [],
                //要修改的角色权限的id
                roleId:'',
            }
        },
        created() {
            this.getRolesList()
        },
        methods: {
            clearPath() {
                window.sessionStorage.removeItem('path');
            },
            async getRolesList() {
                let res = await this.$http.get('roles')
                console.log(res)
                if (res.data.meta.status !== 200) {
                    return this.$notify.error('获取角色列表失败');
                } else {
                    this.rolesList = res.data.data;
                    this.$notify.success('成功获取角色列表');
                }
            },
            removeRightById(role, rightId) {
                this.$confirm('确认删除此权限？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await this.$http.delete('roles/' + role.id + '/rights/' + rightId)
                    // console.log(roleId)
                    // console.log(rightId)
                    if (res.data.meta.status === 200) {
                        this.$notify.success('删除成功')
                        role.children = res.data.data
                        console.log(res)
                    } else {
                        this.$notify.error('删除失败')
                    }
                }).catch(() => {
                    this.$notify.info('你取消了删除')
                    console.log(444)
                });
            },
            async editRoleRights(role) {
                this.roleId = role.id
                let res = await this.$http.get('rights/tree')
                console.log(res.data.data)
                this.rightList = res.data.data
                this.getAllRoleRightId(role, this.treeKey)
                this.editRoleRightsDialog = true
            },
            getAllRoleRightId(node, arr) {
                if (!node.children) {
                    return arr.push(node.id)
                }
                node.children.forEach(item => {
                    this.getAllRoleRightId(item, arr)
                })
            },
            clearTreeKey() {
                this.treeKey = []
            },
            async sendTreeKey(roleId) {
                let allKey = [
                    ...this.$refs.TreeRef.getCheckedKeys(),
                    ...this.$refs.TreeRef.getHalfCheckedKeys()
                ]
                let allKeysString = allKey.join(',')
                let res = await this.$http.post('roles/'+this.roleId+'/rights',{rids:allKeysString})
                console.log(res.data)
                await this.getRolesList()
                this.editRoleRightsDialog = false
            },

        }
    }
</script>

<style scoped>
    .db-row-1 {
        border-top: 1px solid #ccc;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .db-row-1:first-child {
        border-top: 1px solid #ccc;
    }

    .db-row-1:last-child {
        border-bottom: 1px solid #ccc;
    }

    .db-row-2 {
        border-top: 1px solid #ccc;
        padding: 0px 10px;
        display: flex;
        align-items: center;
    }

    .db-row-2:first-child {
        padding-top: 0;
        border-top: none;
    }

    .db-row-2:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .db-row-3 {
        display: inline-block;
        padding: 10px 5px;
    }

    .db-row-3:first-child {
        /*padding-top: 0;*/
        border-top: none;
    }

    .db-row-3:last-child {
        border-bottom: none;
        /*padding-bottom: 0;*/
    }
</style>
